<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性（10个属性）</title>
		<!-- 文本格式化属性（4种方式 10个属性）
		 1.控制字体：font-family，font-size,font-weight,
		 2.控制文本布局【对齐 间隙 】：text-algin，line-height，letter-spacing word-spacing
		 3.文本修饰效果：text-decoration text-shadow
		 4.处理文本效果：white-space【换行】
		 -->
		<style>
			/* CSS3语法：选择器{
				属性： 属性值；
				属性： 属性值；
				} 
				叫法：一个样式
				id选择器语法： html元素加 id=“别名”
				              css中加 #别名选中
							  提醒：加权 元素选择器名 1
							  id选择器  100
				*/
			 div#d1{
				 color: #ff557f;
				 /* 知识点1：文本格式化属性-->1.针对控制字体 
				 font-family 字体家族：微软雅黑，华文彩云,sans-serif黑体；
				 问题：可以设置多个字体 浏览器会按照顺序找字体
				 兼容考虑：用户电脑字体缺失  对应找可以使用的字体
				 */
				  
				 /* 知识点2：文本格式化属性-->2.针对控制字体
				  font-size字体尺寸：px/em；
				  px---PC端----像素  ，特点：绝对值
				  em---移动端--特点:相对父元素字体大小，倍数
				  */
				 font-size: 15px;
				 /* 知识点3：文本格式化属性-->3.针对控制字体
				 font-weight字体粗细程度属性： 100 200 300...900
				 用法：全局字体，通配选择器中使用 400和700
				 400正确粗细大小   对应normal 正常的
				                    bold  相对于父元素加粗
									light  相对于父元素变细
									
				 */
				 font-weight: 700;
			 }  
			 #d1{
				 color: cornflowerblue;
			 }
			 
			 
			 div h1.c1{
				  /* 知识点4：文本格式化属性-->3.控制文本格式*/
				  text-align: justify;
				  /* 两端对齐：字体空间长，使用位置：弹性布局 */
				 color: #ff557f;
			 }
			 
			 div span{
				 border: 1px solid red;
				 height: 60px;
				 /* 行转块 */
				 display:block;
				 /* 知识点5：文本格式化属性--文本对齐方式【垂直】
				  line-height：行高属性
				  使用方式：一定跟高度一起出现【垂直】
				  */
				 line-height: 60px;
				 /* 知识点6：文本格式化属性--文本间隙【字符】 */
				 lett er-spacing: 5px;
				 /* 知识点7：文本格式化属性--文本间隙【单词】 */
				 word-spacing: 2px;
				 /* 补充;1.所有单词大写2.所有单词的首字母大写3
				  .首行缩进200px*/
				  text-transform: capitalize;
				  text-transform: uppercase;
				  text-indent: 200px;
			 }
			 
			a{
				/* 知识点8：文本修饰效果 针对超链接
				使用方法：与通配选择器一起使用
				none：去掉超链接下划线
				underline：默认下划线  切换
				line-through：删除线 被html5中s元素取代
				*/
				text-decoration: line-through;
				/* 知识点9：文本修饰效果，针对超链接和文本
				 text-shadow 文本阴影属性
				 属性值：x值 y值 blur模糊距离 颜色；
				 */
				text-shadow: 5px 5px 10px #ff007f;
			} 
			p{
				border: 1px solid red;
				/* 知识点10：white-space换行属性
				 属性值不同 效果不同
				 nowrap：效果 不换行 作用：在一行显示 不可以超出范围
				 使用特点：配合溢出一起使用
				 pre     效果：保留空格和回车
				 nomal：默认
				 ;*/
				 white-space: nowrap; /* 不换行 就一行 */
				 overflow: hidden;    /* 其他行省略 */
				 white-space: pre;   /* 保存原始文本空格和回车 */
				 white-space: normal;/* 默认 空格合并 自动换行 */
			}
			
			
			
			
			
		</style>
	</head>
	<body>
		<h1>处理文本效果【换行和溢出】</h1>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt architecto animi nobis in? Voluptatibus velit iusto temporibus est veniam labore. Modi culpa nesciunt reiciendis nam, nemo ad maiores fugiat temporibus.</p>
		
		
		<h1>
			<marquee>控制文本布局【对齐 间隙】</marquee>
		</h1>
		<!-- 需求：创建div，内嵌span元素，增加假文 
		          设置样式：添加一个像素实线的边框，高度：25px
				  使用派生选择器找到span元素
			-->
		<div><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis nemo itaque in totam impedit illo aliquid est atque, consequuntur veniam, quam ex unde nostrum! Fuga repudiandae illum magni quod eligendi?</span></div>
		<!-- 需求：创建a元素，超链接跳转到唐工官网 -->
		<div style="height: 200px;"></div>
		<h1>文本修饰效果</h1>
		<a href="http://www.tsgzy.edu.cn">跳转到唐工官网</a>
		
		<div id="d1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur autem vitae porro facere eius itaque tempora voluptatum quo provident animi eaque tenetur, ex quis! Adipisci, quia. Molestias maiores praesentium atque.</div>
	    <!-- 需求：外层div 内层h1，起别名两个 css任意别名字体设置颜色
		 要求：加权方式
		 -->
		<div>
			<h1 class="c1 c2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, error in quisquam sed optio quod voluptates dicta molestias, odio amet cum eum ipsum mollitia nostrum nam quas voluptas deleniti dolores.</h1>
		</div>
	</body>
</html>